<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css"/>
		<style type="text/css">
			.dtop{
				width: 100%;
				background-color: white;
				margin-bottom: 0.4em;
				padding: 0.4em;
			}
			.dbot{
				width: 100%;
				background-color: white;
				padding: 0.4em;
			}
			
			
			.place button{
				width:100%;
				color: #676664 !important;
			    border: 0 !important;
			    text-align: right;
			}
			.place{
				
			}
			.mui-input-row .mui-btn {
			    float: right;
			    width: 65%;
			    padding: 11px 15px;
			}
			
			 input[type=radio]{
        /*去除浏览器默认样式*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        /*自定义样式*/
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 1.5em;
		height: 1.5em;
        border: 1px solid #00bfff;
        outline: none;
        cursor: pointer;
        /*设置为圆形，看起来是个单选框*/
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
    }
 
    /**
    * 单选框 选中之后的样式
    **/
    input[type=radio]:after{
        content: '';
        position: absolute;
        width: 0.5em;
        height: 0.5em;
        display: block;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: #00bfff;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0);
        /*增加一些动画*/
        -webkit-transition : all ease-in-out 300ms;
        -moz-transition : all ease-in-out 300ms;
        transition : all ease-in-out 300ms;
    }
    input[type=radio]:checked:after{
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }
input[type=text]{
       text-align: right;
    }
    
    	.radios{
    		width: 60%;
    		height: 40px;
    		display: flex;
    		justify-content: space-around;
    		align-items: center;
    	}
		.headerdiv{
			width: 100%;
			height: 100%;
			padding: 11px;
			text-align: center;
		}
		.headerdiv>label{
			width: 100%;
			height: 100%;
		}
		.headerdiv>label>img{
			width: 80%;
			height: auto;
			border-radius: 7px;
			
		}

		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">添加会员卡</h1>
		</header>
		<div class="mui-content">
			<div class="headerdiv">
				<p>
					上传图片：
					宽：1.5，高：1，
					大小：小于1M
					图片格式：JPG、PNG、GIF、JPEG
					请严格按照比例大小上传图片
				</p>
			</div>
			<div class="headerdiv">
				<label for="male">
					<img id="himg" src="img/vipcard.png"/>
				</label>
				<input type="file" hidden="hidden" accept="image/jpg,image/png,image/gif, image/jpeg" name="male" id="male" value="" />
			</div>
			
		    <div class="dtop">
		    	<div class="mui-input-row border-b">
	   			    <label>等级名称</label>
	   			    <input id="member_level" type="text" class="textr" placeholder="输入等级名称">
	   			</div>
	   			<div class="mui-input-row ">
	   			    <label>折扣</label>
	   			    <input id="member_discount" type="number" class="textr" placeholder="输入1-100正整数">
	   			</div>
		    </div>
		     <div class="fgd"></div>
		    <div class="footdiv">
		    	<button id="addemp" type="button" class="mui-btn mui-btn-blue mui-btn-block">保存</button>
		    </div>
		    
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var images_id = 0,	//图片id
				mid = 0,
				is_img = false; //是否上传图片
			window.onload = function(){
				
				mui.init();
				mid = getrequest().mid||0;
				if(mid > 0){
					get_member_level();
				}
				
				//监听文件改变 设置图片
				$("input[name=male]").bind("change",function(){
					console.log(this.files[0]);
					$("#himg").attr("src",URL.createObjectURL($(this)[0].files[0]));
					is_img = true;
				})
				
				//监听保存
						g("addemp").addEventListener('tap',function(e){
							if(is_img){
								var createObjectURL = function(blob){
					            	return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
						        };
								let imgurl = createObjectURL($("#male")[0].files[0]);
								getBase64Image(imgurl,function(res){
			                		//console.log(res.dataURL);
			                		console.log(res.dataURL.length);
				                	var data = {
					                		url:'/api/upload/image_base64',
					                		data:{
					                			access_token:acctoken(),
					                			images:res.dataURL
					                		}
					                	}
							                ajax(data,function(resp){
							                	images_id = resp.data.images_id;
							                	add_level(images_id);
							                })
					                })
							}else{
								add_level();
							}
							
							
		                })
			}	
			
			function add_level(img_id){
				var data = null;
				if(mid == 0){
					data = {
						url:"/api/member_level/add",
						data:{
							access_token:acctoken(),
							member_level:g("member_level").value,
							member_discount:g("member_discount").value||100,
							images_id :img_id||images_id,
						}
					}
				}else{
					data = {
						url:"/api/member_level/bedit",
						data:{
							access_token:acctoken(),
							discount:[{
								"id":mid,
								"member_level":g("member_level").value,
								"member_discount":g("member_discount").value||100,
								"images_id" :img_id||images_id,
							}]
						}
					}
				}
				
				ajax(data,function(res){
					console.log(res)
					mui.toast(res.msg);
					setTimeout(function(){
						var cPage = plus.webview.currentWebview();
					    var bPage = cPage.opener();
					    bPage.evalJS("onshow();");
						mui.back();
					},200)
				})
			}
			
			function get_member_level(){
				var data = {
					url:"/api/member_level/detail",
					data:{
						access_token:acctoken(),
						level_id:mid,
					}
				}
				
				ajax(data,function(res){
					console.log(res);
					g("member_level").value = res.data.member_level;
					g("member_discount").value = res.data.member_discount;
					if( null != res.data.level_images_path){
						g("himg").src = res.data.level_images_path;
					}
				})
				
			}
		</script>
	</body>

</html>